<template>
  <div class="youlike">
    <div class="img-box">
      <img :src="item.img"  width="213px" height="140px">
    </div>
    <div class="desc-box">
      <div style="width: 100%;margin: 2px 0">
        <p class="name-youlike">{{item.name}}</p>
      </div>
      <div class="header-box">
        <el-rate
          v-model="item.rateing"
          disabled
          show-score
          void-color="#999999"
          text-color="#ff9900"
          score-template="{value}分">
        </el-rate>
      </div>
      <div class="header-box">
        <p class="address">{{item.address}}</p>
      </div>
      <div class="header-box">
        <p class="Price-desc">
          <span style="font-size: 14px;letter-spacing: -0.8px;" v-if="item.price !== '暂无报价'">￥</span>
          {{item.price}}
          <span v-if="item.price !== '暂无报价'" style="font-size: 12px;margin-left: 2px">起</span>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    item: {
      type: Object,
      default: {
        img: '',
        name: '',
        address: '',
        rateing: 3.5,
        price: 15
      }
    }
  }
}
</script>
<style scoped lang="scss">
.youlike{
  width: 213px;
  padding: 10px;
}
.img-box{
  width: 100%;
  overflow: hidden;
  border-radius: 5px;
}
.desc-box{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.name-youlike{
  width: 95%;
  font-size: 16px;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.header-box{
  width: 100%;
}
.address{
  font-size: 12px;
  color: #999999;
  width: 95%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.Price-desc{
  font-size: 22px;
  color: #FF6600;
  letter-spacing: -0.8px;
  font-weight: 600;
}
</style>
